import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableHighlight} from 'react-native';
import moduleName from 'react-native-pwd-input';
import {Modal, Paragraph, Button} from 'react-native-paper';
import Password from 'react-native-password-pay';
import request from '../../utils/request';
import AsyncStorage from '@react-native-community/async-storage';
export default class vip extends Component {
  constructor(props) {
    super(props);
    this.__handleGetUserId();
    this.state = {
      passwordVisible: false,
      vipName: '月付套餐',
      price: '30.00',
      month: '',
    };
  }

  _handleBuy = () => {
    this.setState({loading: true});
    let userId = '';
    AsyncStorage.getItem('userId').then(value => {
      userId = value;
    });
    request({
      url: '/user/vip',
      method: 'post',
      data: {
        id: this.state.userId,
        month: this.state.month,
      },
    }).then(() => {
      request({
        url: '/user/id',
        method: 'get',
        params: {
          id: this.state.userId,
        },
      }).then(resp => {
        AsyncStorage.setItem('user', JSON.stringify(resp.obj)).then(() => {
          alert('您已成功的完成购买');
          this.setState({loading: false, passwordVisible: false});
        });
      });
    });
  };

  _handleShowModel = (name, price, month) => {
    this.setState({
      vipName: name,
      price: price,
      month: month,
      passwordVisible: true,
      loading: false,
      pwd: '',
    });
  };

  __handleGetUserId() {
    const userId = '';
    AsyncStorage.getItem('userId').then(value => {
      this.setState({
        userId: value,
      });
    });
    console.log('getItem', userId);
    this.setState({
      userId: userId,
    });
  }

  // _handleClose = () => {
  //   this.setState({
  //     passwordVisible: false,
  //   });
  // };

  render() {
    return (
      <View>
        <View style={styles.title}>
          <Text style={styles.title1}>开通北城之音VIP</Text>
          <Text style={styles.title2}>畅听曲库好音乐！</Text>
        </View>
        <View style={styles.choiceView}>
          <TouchableHighlight
            style={styles.choiceItem}
            underlayColor={'#C5B2FA'}
            onPress={() => {
              this._handleShowModel('月付套餐', '30.00', 1);
            }}>
            <View style={styles.flexItem}>
              <Text style={styles.name}>月付套餐</Text>
              <Text style={styles.money}>￥30.00</Text>
            </View>
          </TouchableHighlight>

          <TouchableHighlight
            style={styles.choiceItem}
            underlayColor={'#C5B2FA'}
            onPress={() => {
              this._handleShowModel('季付套餐', '88.00', 3);
            }}>
            <View style={styles.flexItem}>
              <Text style={styles.name}>季付套餐</Text>
              <Text style={styles.money}>￥88.00</Text>
            </View>
          </TouchableHighlight>

          <TouchableHighlight
            style={styles.choiceItem}
            underlayColor={'#C5B2FA'}
            onPress={() => {
              this._handleShowModel('年度套餐', '298.00', 12);
            }}>
            <View style={styles.flexItem}>
              <Text style={styles.name}>年度套餐</Text>
              <Text style={styles.money}>￥298.00</Text>
            </View>
          </TouchableHighlight>

          <TouchableHighlight
            style={styles.choiceItem}
            underlayColor={'#C5B2FA'}
            onPress={() => {
              this._handleShowModel('终身套餐', '648.00', 1200);
            }}>
            <View style={styles.flexItem}>
              <Text style={styles.name}>终身套餐</Text>
              <Text style={styles.money}>￥648.00</Text>
            </View>
          </TouchableHighlight>
        </View>

        <Modal
          animationType="slide"
          transparent={true}
          visible={this.state.passwordVisible}
          onDismiss={() => {
            this.setState({passwordVisible: false});
          }}>
          <View style={styles.model}>
            <Text style={{fontSize: 25, margin: 10}}>{this.state.vipName}</Text>

            <Text style={{fontSize: 25, marginTop: 10, marginBottom: 20}}>
              ￥{this.state.price}
            </Text>

            <Password
              maxLength={6}
              onChange={value => {
                this.setState({pwd: value});
              }}
            />
            <Paragraph style={{margin: 20}}>
              （请输入您的校园卡支付密码）
            </Paragraph>
            <Button
              loading={this.state.loading}
              icon="credit-card-multiple"
              mode="contained"
              style={{marginTop: 20}}
              onPress={() => {
                this._handleBuy();
              }}>
              确认支付
            </Button>
          </View>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  title: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: 100,
    backgroundColor: '#6200EE',
  },
  title1: {
    fontSize: 20,
    color: 'white',
  },
  title2: {
    fontSize: 25,
    color: 'white',
    marginTop: 10,
  },
  choiceView: {
    height: 400,
    // display: 'flex',
  },
  choiceItem: {
    borderWidth: 3,
    padding: 20,
    margin: 20,
    borderColor: '#6200EE',
    borderRadius: 10,
    // display: 'flex',
    // flexDirection: 'row',
    // justifyContent: 'space-between',
  },
  name: {
    fontSize: 18,
  },
  money: {
    color: '#6200EE',
    fontSize: 20,
  },
  flexItem: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  model: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
  },
});
